<template>
  <div id="GamePage" class="GamePage">
    <div
      id="canvas-box"
      class="canvas-box"
      :style="{
        top: canvasTop,
        left: canvasLeft,
        transform: `translate(-50%, -50%) scale(${scaleValue})`,
      }"
      @mousedown="handleMouseDown"
      @mouseup="isWatchMouseMove = false"
      @mouseleave="isWatchMouseMove = false"
      @mousemove="handleMouseMove"
      @mousewheel="handleMouseWheel"
    >
      <div class="chess">
        帅
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GamePage",
  data() {
    return {
      // 是否监听鼠标移动事件
      isWatchMouseMove: false,
      // 画布顶部距离
      canvasTop: "50%",
      // 画布左侧距离
      canvasLeft: "50%",
      // 左侧拖动误差
      leftDeviation: 0,
      // 顶部拖动误差
      topDeviation: 0,
      // 缩放值
      scaleValue: 0.8,
    };
  },
  methods: {
    // 初始化
    init() {
      
    },
    handleMouseMove(event) {
      if (this.isWatchMouseMove) {
        this.canvasLeft = event.clientX + this.leftDeviation + "px";
        this.canvasTop = event.clientY + this.topDeviation + "px";
      }
    },
    handleMouseDown(event) {
      let canvasBox = document.getElementById("canvas-box");
      let computedStyle = window.getComputedStyle(canvasBox);
      this.leftDeviation =
        parseInt(computedStyle.left.replace("px", "")) - event.clientX;
      this.topDeviation =
        parseInt(computedStyle.top.replace("px", "")) - event.clientY;
      this.isWatchMouseMove = true;
    },
    handleMouseWheel(event) {
      if (event.wheelDelta > 0) {
        this.scaleValue += 0.2;
      } else if (this.scaleValue > 0.4) {
        this.scaleValue -= 0.2;
      }
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="less" scoped>
.GamePage {
  padding: 0;
  position: relative;
  background: #000;
  text-align: center;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  .canvas-box {
    background: #fff;
    background-image: url('../../assets/qipan.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 50vw;
    height: 100vh;
    cursor: pointer;
    transform: translate(-50%, -50%) scale(1);
  }
  .chess {
    position: absolute;
    background: #000;
    width: 70px;
    height: 70px;
    border-radius: 70px;
    font-size: 36px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    box-sizing: content-box;
    &:hover {
      border: 6px solid #81ff81;
    }
  }
}
</style>